<template>
  <el-dialog
    title="预览模板"
    :visible.sync="showFlag"
    :modal="false"
    width="40%"
  >
    <!-- 库位码 -->
    <span class="" selectable="false" space="false" decode="false">
      {{ barcodeTypeName }}
    </span>
    <div class="content" v-show="barcodeTypeName == '库位条码'">
      <div class="cardborder" style="width: 400px; height: 170px">
        <div style="width: 100%">
          <span class="test"> 库位名称 : XXXX01</span>
        </div>
        <svg id="jsbarcode1"></svg>
      </div>
    </div>
    <!-- 物料码 -->

    <div style="position: relative" v-show="barcodeTypeName == '物料条码'">
      <div class="content">
        <div
          class="cardborder cardborder-border"
          style="width: 400px; height: 170px"
        >
          <svg id="jsbarcode2"></svg>
        </div>
      </div>
      <div class="positionText">
        <span style="width: 100%">LXX-XX-</span>
        <span>2M038-XXXXX</span>
      </div>
    </div>
    <!-- 批次码 -->

    <div class="content" v-show="barcodeTypeName == '批次条码'">
      <div class="cardborder" style="width: 400px; height: 170px">
        <div style="width: 100%"></div>
        <svg id="jsbarcode3"></svg>
      </div>
    </div>

    <!-- 产品条码 -->

    <div class="content" v-show="barcodeTypeName == '产品条码'">
      <div class="cardborder" style="width: 400px; height: 170px">
        <div style="width: 100%">
          <span class="test" style="font-size: 18px"> 工单编号 : XXXXX</span>
        </div>
        <div style="width: 100%">
          <span class="test" style="font-size: 18px"> 产品名称 : XXXXX</span>
        </div>
        <svg id="jsbarcode4"></svg>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// reportAll
import { replaceSn } from "@/api/mes/pro/workorderSn";
export default {
  name: "productReport",
  data() {
    return {
      caseInfo: {},
      showFlag: false,
      barcodeTypeName: null,
    };
  },
  methods: {
    init(row) {
      console.log(row, "row");
      this.barcodeTypeName = row.barcodeTypeName;
      this.caseInfo.reportSn = row.snCode;
      this.caseInfo.snId = row.snId;
      this.showFlag = true;
      let code = "A0XXX";
      setTimeout(() => {
        /* 库位码 */
        JsBarcode(document.getElementById("jsbarcode1"), code, {
          lineColor: "#000",
          background: "#b5babe",
          width: 3,
          height: 80,
          textMargin: 5,
          font: "SimSun", //设置文本的字体

          fontSize: 15, //设置文本的大小
          text: `库位编码 : ${code}`,
          textAlign: "left", //设置文本的水平对齐方式
        });

        let code2 = "HT24073XXXX";
        /* 物料码 */
        JsBarcode(document.getElementById("jsbarcode2"), code2, {
          lineColor: "#000",
          background: "#b5babe",
          width: 2.7,
          height: 80,
          textMargin: 5,
          font: "SimSun", //设置文本的字体
          fontSize: 25, //设置文本的大小
          text: code2,
          textAlign: "left", //设置文本的水平对齐方式
        });

        let code3 = "202404170XXXX";
        /* 批次码 */
        JsBarcode(document.getElementById("jsbarcode3"), code3, {
          lineColor: "#000",
          background: "#b5babe",
          width: 2.7,
          height: 80,
          textMargin: 5,
          font: "SimSun", //设置文本的字体
          fontSize: 25, //设置文本的大小
          text: `批次号 : ${code3}`,
          textAlign: "center", //设置文本的水平对齐方式
        });

        let code4 = "5024081XXX";
        /* 批次码 */
        JsBarcode(document.getElementById("jsbarcode4"), code4, {
          lineColor: "#000",
          background: "#b5babe",
          width: 2.3,
          height: 70,
          textMargin: 5,
          font: "SimSun", //设置文本的字体
          fontSize: 17, //设置文本的大小
          text: code4,
          textAlign: "center", //设置文本的水平对齐方式
        });
      });
    },
  },
};
</script>
<style lang="scss">
.el-dialog__body {
  //超出隐藏
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
// .contentDiv {
//   width: 1350px;
// }
.el-table {
  margin-bottom: 15px;
}
.content {
  width: 600px;
  height: 280px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardborder {
  // flex 换行
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-content: center;
  border-radius: 5px;
  background-color: #b5babe;
}
.cardborder-border {
  border-radius: 0px 0px 40px 40px;
}

#jsbarcode1 {
  margin-top: 0px;
}

.test {
  font-size: 15px;
  font-family: SimSun;
  color: black;
  margin-left: 80px;
}
.positionText {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 170px;
  left: 310px;
  font-size: 18px;
  font-family: SimSun;
  color: black;
}
</style>
